"use client"
import React, { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { House, BarChart3, ChevronLeft, ChevronRight, Database, LayoutDashboard, Settings, Users } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

type NavItem = {
  title: string
  path: string
  icon: React.ReactNode
}

const navItems: NavItem[] = [
  { title: "首页", path: "/", icon: <House className="w-5 h-5" /> },
  { title: "仪表盘", path: "/dashboard", icon: <LayoutDashboard className="w-5 h-5" /> },
  { title: "数据管理", path: "/dashboard/data", icon: <Database className="w-5 h-5" /> },
  { title: "账单管理", path: "/dashboard/bills", icon: <BarChart3 className="w-5 h-5" /> },
  { title: "用户管理", path: "/dashboard/users", icon: <Users className="w-5 h-5" /> },
  { title: "系统设置", path: "/dashboard/settings", icon: <Settings className="w-5 h-5" /> }
]

/**
 * 工作台侧边栏
 */
const Sidebar = () => {
  const location = usePathname()
  const [collapsed, setCollapsed] = useState(false)

  const NavButton = (item: NavItem) => {
    return (
      <Link href={item.path}>
        <Button
          variant="ghost"
          className={cn(
            "w-full px-2",
            collapsed ? "justify-center" : "justify-start",
            location === item.path
              ? "bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-300"
              : "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
          )}
        >
          {item.icon}
          {!collapsed && <span className="ml-3 whitespace-nowrap">{item.title}</span>}
        </Button>
      </Link>
    )
  }

  return (
    <aside
      className={cn(
        "flex flex-col h-full border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 transition-all duration-300 ease-in-out",
        collapsed ? "w-16" : "w-64"
      )}
    >
      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
        {!collapsed ? (
          <>
            <div className="flex items-center space-x-3">
              <div className="flex items-center justify-center w-10 h-10 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg">
                <LayoutDashboard className="text-white w-6 h-6" />
              </div>
              <h1 className="text-xl font-bold text-gray-900 dark:text-white whitespace-nowrap">Flow Forge</h1>
            </div>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setCollapsed(!collapsed)}
              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
            >
              <ChevronLeft className="w-5 h-5" />
            </Button>
          </>
        ) : (
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setCollapsed(!collapsed)}
            className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 w-full"
          >
            <ChevronRight className="w-5 h-5" />
          </Button>
        )}
      </div>

      <TooltipProvider delayDuration={100}>
        <nav className="flex-1 p-4 overflow-y-auto">
          <ul className="space-y-2">
            {navItems.map((item) => (
              <li key={item.path}>
                {collapsed ? (
                  <Tooltip>
                    <TooltipTrigger asChild>{NavButton(item)}</TooltipTrigger>
                    <TooltipContent side="right" className="ml-2">
                      {item.title}
                    </TooltipContent>
                  </Tooltip>
                ) : (
                  <>{NavButton(item)}</>
                )}
              </li>
            ))}
          </ul>
        </nav>
      </TooltipProvider>
    </aside>
  )
}

export default Sidebar
